<template>
	<div class="project-list">

		<div class="option">
			<div class="adaption adaption-option" v-if="!isEmpty">
				<g-button type="primary" @click="createProject" :disabled="isLoading" size="large" v-show="currentApp.key !== 'all'">
                	<div class="creat-project">
                		新建项目
                	</div>
                </g-button>

                <div class="range" >
                	<span @click="switchSort">
                        <!-- <i class="iconfont" :class="[currentApp.order === 'desc' ? 'icon-flip-down' : 'icon-flip-up']"></i> 时间 -->
                		<i class="iconfont" :class="`icon-sort-${currentApp.order}`"></i> 时间
                	</span>
                	<span @click="switchView">
                		<template v-if="isListView"><i class="iconfont icon-tiling"></i> 平铺</template>
                		<template v-else><i class="iconfont icon-menu"></i> 列表</template>
                	</span>
                </div>

                <div class="search" :class="{'left': currentApp.key == 'all'}">
                    <input type="text" class="input-search" v-model="currentApp.search" v-on:keyup.enter="query" placeholder="搜索">
                    <div class="btn-search" @click="query">
                        <i class="iconfont icon-loading icon-spin" v-show="isLoading"></i>
                        <i class="iconfont icon-search" v-show="!isLoading"></i>
                    </div>
                </div>
			</div>
        </div>

        <div class="projects-container">

            <div v-if="isEmpty" class="no-data">
                <img src="../../../static/img/no-data.png">
                <div class="no-data-tip">尚未创建该类型的项目</div>
                <div class="empty-handler">
                    <g-button type="primary" @click="createProject" :disabled="isLoading" v-show="currentApp.key !== 'all'">
                        <div class="creat-project">
                            新建项目
                        </div>
                    </g-button>
                </div>
                
            </div>

            <template v-else>
            	<div v-show="isListView" class="list-view-header adaption" :class="{'with-app': isAll}">
            		<div class="name">项目名称</div>
            		<div class="app-name">应用名称</div>
            		<div class="date">更新日期</div>
            		<div class="project-option">操作</div>
            	</div>

				<g-scrollbar class="project-vertical-scroll" :class="{'with-header': isListView}">
					<div class="adaption">
						<div class="projects-content">
							<ul class="project-view">
				        		<component
				        			v-for="(project,index) in projects"
				        			:is="currentApp.view"
				        			:isAll="isAll"
			        				:project="project"
			        				:index="index"
			        				:key="project.uid"
			        				v-on:open = "open"
			        				v-on:remove="remove"></component>
				        	</ul>

				        	<div class="add-more-wrapper">
			                    <button class="add-more" v-show="currentApp.hasNext" @click="addMore()" :disabled="isLoading">
			                        <span v-show="!isLoading">
			                            <i class="iconfont icon-flip-down"></i> 加载更多
			                        </span>
			                        <span v-show="isLoading">
			                            <i class="iconfont icon-loading spin"></i> 加载中…
			                        </span>
			                    </button>
			                </div>
						</div>
					</div>
				</g-scrollbar>
            </template>

        </div>
	</div>

</template>

<script>

	import GButton from '@/components/common/g-button'
	import GScrollbar from '@/components/common/g-scrollbar'
	import ListWrapper from './list-wrapper'
	import TilingWrapper from './tiling-wrapper'

	import {project as projectAPI} from '@/api'
	import { appNameMapping } from '@/config/config'

	export default{
		name: 'projectList',
		
		data (){
			return {
                isEmpty: false,
			}
		},

		components: {
			GButton,
			GScrollbar,
			ListWrapper,
			TilingWrapper
		},

		props: {
			isLoading: Boolean,
			projects:{
				type:  Array,
				default: function () {
					return []
				}
			},
			currentApp: Object
		},
		
		activated () {
	        this.$emit( 'on-view-load' );
	    },

	    computed: {
	    	// isEmpty () {
	    	// 	return !this.projects.length;
	    	// },
            appItem () {
                return this.currentApp;
            }, 
	    	
	    	isAll () {
	    		return this.currentApp.key === 'all';
	    	},

	    	isListView () {
	    		return !!(this.currentApp.view === 'list-wrapper');
	    	},
	    },

        watch: {
            projects (newVal, oldVal) {

                if (newVal != null) {
                    this.isEmpty = !newVal.length;
                }
                
            }
        },
		
		methods: {

			createProject () {
				let key = this.currentApp.key;
				let createUrl = appNameMapping[key]['create'];
				window.open(createUrl, '_block');
			},

			switchSort () {
				if (this.loading) return;
				this.$emit('sort-time');
			},

			switchView () {
				if (this.loading || this.isEmpty) return;
				let view = this.currentApp.view === 'list-wrapper' ? 'tiling-wrapper' : 'list-wrapper';
                this.$emit('switch-view', view)
			},

			query () {
				if (this.loading) return;
				this.$emit('search');
			},

			addMore () {
				if (this.loading) return;
				this.$emit('add-more');
			},


			remove (project, index) {

	            let uid = project.uid;
	            let type = project.type;
                let success = false;
	            let rootPath = appNameMapping[type]['rootPath'];
	            let url = `${rootPath}${uid}`;

	            let promise = this.$confirm(
	                `项目删除后不可恢复，确认删除该项目？`,
	                '删除',
	                {
	                    type: 'warning',
	                    confirmButtonType: 'danger',
	                    confirmButtonText: '删除',
	                    beforeClose: async(action, instance, done) => {

	                        if (action === 'confirm') {
	                            instance.confirmButtonLoading = true;
	                            instance.confirmButtonText = '删除中...';
	                            instance.cancelButtonDisabled = true;

	                            let result = await projectAPI.remove(url);

	                            if (!result || result.data.code != 0) {
	                                this.$message.error('删除失败');
                                    done();
                                    return;
	                            }

                                success = true;
	                            done();
	                            instance.confirmButtonLoading = false;

	                        } else {
	                            done();
	                        }
	                        done()
	                    }
	                }
	            );

	            promise.then(async () => {
                    if (!success) return;
                    this.$message.success('删除成功');
	                this.$emit('remove-project', this.currentApp.key, index);
	            }).catch(() => { })
	        },

			open (app, uid) {
				let url = `/apps/${app}/${uid}/edit`;
				window.open(url, '_block');
			}
		}
	}
</script>

<style lang="scss">

	@import 'common';
	
	.project-list {

		height: 100%;
		width: 100%;
		position: relative;

		.adaption {

            margin: 0 auto;
            position: relative;
            min-width: 510px;

            @media screen and (min-width: 1741px) {
                max-width: 1320px;
            }
            @media screen and (max-width: 1740px) {
                max-width: 1050px;
            }
            @media screen and (max-width: 1560px) {
                max-width: 780px;
            }
            @media screen and (max-width: 1200px) {
                max-width: 510px;
            }

		}

		.option{
            
            padding: 18px 0;
            width: 100%;
            overflow: hidden;
            position: absolute;

            .adaption-option {
            	overflow: hidden;
                height: 32px;
            }

            .creat-project {
            	float: right;
            	height: 100%;
            	margin-left: 4px;
            	line-height: 30px;
            	color: #fff;
            	font-weight: bold;
            }

            .range{
            	float: right;
            	width: 160px;
            	color: $gray;
            	padding: 6px 0;
            	text-align: right;
            	cursor: pointer;
                @include user-select(none);
                
            	>span{
            		line-heigth: 32px;
            		height: 32px;
            		text-align: center;
            		font-size: 13px;
            		padding: 0 5px;

                    &:hover {
                        color: $primary;
                    }
            	}
            }

            .search{
                float: right;
                width: 210px;
                color: $gray;
                position: relative;

                &.left {
                	float: left !important;
                }

                .input-search{
                    width: 210px;
                    height: 32px;
                    padding: 6px 42px 6px 12px;
                    border: 1px solid $bdGray;
                    border-radius: 16px;

                    &:focus {
                    	border-color: $info;
                    }
                }

                .btn-search{
                    width: 32px;
                    height: 32px;
                    text-align: center;
                    line-height: 32px;
                    cursor: pointer;
                    position: absolute;
                    right: 6px;
                    top: 0;

                    >i {
                    	font-size: 14px;
                    }

                    &:hover{
                        color: $primary;
                    }
                }
            }

        }

		.project-vertical-scroll {

			width: 100%;
            height: 100%;

            &.with-header {
                height: calc(100% - 50px);
            }

            .g-scrollbar-scrollbar-vertical{
                width: 10px;
            }

            .scrollbar{
                display: block !important;
                width: 10px;
                background-color: #9e9e9e;
            }

            .scrollbar.g-scrollbar-transition {
                width: 10px;
            }
		}

        .projects-container {

        	padding: 68px 0 64px 0;
        	height: 100%;

        	.no-data{
                text-align: center;
                position: absolute;
                width: 100%;
                top: 50%;
                transform:translate(0, -100%);
                @include user-select(none);

                .no-data-tip {
                    font-size: 14px;
                    margin-top: 16px;
                    color: $gray;
                }

                .empty-handler {
                    margin-top: 16px;
                }
            }

            .list-view-header {

            	height: 50px;
                padding: 8px 0;
                line-height: 32px;
            	font-size: 13px;
            	color: $gray;
                border-top: 1px solid $bdGray;
                border-bottom: 1px solid $bdGray;

            	> div {
            		float: left;
            		height: 100%;
            	}

            	>.name {
            		width: 35%;
            		padding: 0 4px;
                    text-align: left;
            		@include text-overflow();
            	}

            	>.app-name {
            		width: 0px;
            		display: none;
                    text-align: right;
            	}

            	>.date {
            		width: 35%;
                    text-align: right;
            	}

            	>.project-option {
            		width: 30%;
                    text-align: center;
            	}

            	&.with-app {
            		>.name {
	            		width: 30% !important;
	            		padding: 0 4px;
                        text-align: left;
	            		@include text-overflow();
	            	}

	            	>.app-name {
	            		width: 25% !important;
	            		display: block !important;
                        text-align: right;
	            	}

	            	>.date {
	            		width: 25% !important;
                        text-align: right;
	            	}

	            	>.project-option {
	            		width: 20% !important;
                        text-align: center;
	            	}
            	}

            }

            .projects-content {
            	margin: 4px -15px 0 -15px;
	            .project-view {
				    overflow: hidden;
                    color: $deepGray;
	            }
            }

        	.add-more-wrapper {
                width: 88px;
                height: 26px;
                 margin: 36px auto;

                .add-more {
                    cursor: pointer;
                    border-radius: 12px;
                    color: $gray;
                    font-size: 12px;
                    line-height: 22px;
                    margin: auto;
                    text-align: center;
                    white-space: nowrap;
                    vertical-align: middle;
                    width: 86px;
                    height: 24px;
                    border: 1px solid $bdGray;
                    background-color: transparent;

                    i{
                        font-size: 12px;
                    }

                    &:hover{
                        border: 1px solid darker($bdGray, 10%);
                    }
                }
            }
        }
	}

</style>